﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" lasteditedby="Geert" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">Focus</title>
  <keywords>
    <keyword translate="true">Behaviors</keyword>
    <keyword translate="true">Commands</keyword>
    <keyword translate="true">Events</keyword>
    <keyword translate="true">Focus</keyword>
    <keyword translate="true">MVVM</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Focus</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To set the focus on a UI element, one must write code in the code-behind. With the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_Windows_Interactivity_Focus" styleclass="Normal" translate="true">Focus</link><text styleclass="Normal" translate="true"> behavior, this is no longer necessary. This behavior sets the focus only once on the first time the associated object is loaded.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Add the following XML namespaces:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">xmlns:i=&quot;clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity&quot;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">xmlns:catel=&quot;http://catel.codeplex.com&quot;</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Focus when the control is loaded</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The easiest and default method is to set the focus when the associated control is loaded. In WPF, this is immediately when the control is focused. In Silverlight, there is a delay of 400 milliseconds by default, otherwise the focus is not set correctly.</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> ItemsSource=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding PersonCollection}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; SelectedItem=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding SelectedPerson}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:Focus</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">In Silverlight, simply calling Focus() on the associated object is not enough. Therefore, the focus is set with a timer with a default delay of 500 milliseconds. This is customizable via the FocusDelay property</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Focus when an event occurs</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">It is possible to set the focus when a specific event occurs. For example, when the layout root gets a </text><text styleclass="Normal" style="font-style:italic;" translate="true">MouseEnter</text><text styleclass="Normal" style="font-style:normal;" translate="true"> event, the </text><text styleclass="Normal" translate="true">focus must be set on a specific control. This can be done via the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> ItemsSource=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding PersonCollection}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; SelectedItem=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding SelectedPerson}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:Focus FocusMoment=&quot;Event&quot; Source=&quot;{Binding ElementName=layoutRoot}&quot; EventName=&quot;MouseEnter&quot;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">If you are using Silverlight, and you don&apos;t want the default delay of 500 milliseconds, make sure to explicitly set it to 0</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Focus when a property changes</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">It is possible to set the focus when a specific property changes. For example, when a value is set, the focus must move on to a new control. This can be done via the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> ItemsSource=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding PersonCollection}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot; SelectedItem=&quot;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">{Binding SelectedPerson}</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160; &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">catel:Focus FocusMoment=&quot;PropertyChanged&quot; Source=&quot;{Binding }&quot; PropertyName=&quot;MyProperty&quot;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true"> /&gt;</text><br/><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true"> &#160; &#160;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">i:Interaction.Behaviors</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&lt;/</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000080;" translate="true">ListBox</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&gt;</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">If you are using Silverlight, and you don&apos;t want the default delay of 500 milliseconds, make sure to explicitly set it to 0</text></para>
  </body>
</topic>
